<template>
  <div>
    <!-- 地址栏面板 -->
    <van-panel
      v-if="address != null"
      :title="address.name"
      :status="address.tel"
      :desc="address.address"
      @click="show = !show"
    ></van-panel>
    <!-- 订购商品信息：商品标签卡，操作按钮 -->
    <div v-for="(item, index) in orderItems" :key="index">
      <van-card
        class="card"
        :title="item.name"
        :desc="item.info"
        :num="item.count"
        :thumb="'data:image;base64,' + item.images[0]"
        :price="item.current_price"
      >
        <van-button
          slot="footer"
          plain
          type="primary"
          size="small"
          @click="onReviewClick(item)"
          >评价</van-button
        >
      </van-card>
    </div>

    <div style="height:50px;" />
    <van-submit-bar :price="totalPrice * 100" />
  </div>
</template>

<script>
import { axios, API_URL } from "../../api"
import { Card, SubmitBar, Cell, CellGroup, Button, Panel } from "vant"

export default {
  components: {
    [Card.name]: Card,
    [SubmitBar.name]: SubmitBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Panel.name]: Panel
  },

  data() {
    return {
      orderItems: [],
      selectedItem: 0,
      order_id: "",
      address: null
    }
  },
  computed: {
    /* 计算商品总价 */
    totalPrice() {
      return this.orderItems.reduce(
        (total, item) => total + item.current_price * item.count,
        0
      )
    }
  },

  methods: {
    onReviewClick(item) {
      this.$router.push({
        name: "review",
        params: { item_id: item.item_id }
      })
    }
  },
  mounted: function() {
    /* 预载订单详情页信息：订购商品信息，地址信息 */
    this.order_id = this.$route.params.order_id
    // 获得订单id
    axios
      .get(API_URL + `customer/orders/${this.order_id}`, {
        headers: {
          authorization: this.$store.state.customer_token
        }
      })
      .then(response => {
        let items = response.data.items
        items.forEach(item => {
          let orderItem = {}
          orderItem.item_id = item.item_id
          orderItem.count = item.count
          orderItem.review_id = item.review_id
          let address_id = response.data.address_id
          // 获得商品地址信息
          axios
            .get(API_URL + `address/${address_id}`, {
              headers: {
                authorization: this.$store.state.customer_token
              }
            })
            .then(response => {
              this.address = {
                id: address_id,
                name: response.data.receiver,
                tel: response.data.phone,
                address: response.data.address
              }
            })
            .catch(err => {
              console.error(err)
            })

          // 获得订单表单信息
          axios
            .get(API_URL + `items/${item.item_id}`, {})
            .then(response => {
              orderItem.name = response.data.name
              orderItem.current_price = response.data.current_price
              orderItem.info = response.data.info
              orderItem.shop_id = response.data.shop_id
              orderItem.images = response.data.images
              this.orderItems.push(orderItem)
            })
            .catch(err => {
              console.error(err)
            })
        })
      })
  }
}
</script>
<style scoped>
#detail-bottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  height: 50px;
  font-size: 14px;
}

.van-submit-bar__button {
  width: 0%;
  left: 5px;
}
</style>
